import React from 'react';
import {Form, Input, Button, Checkbox} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import Identify from '../component/cf/Identify';
import {inject, observer} from 'mobx-react';
import axios from 'axios'
import * as url from '../api/cfApi'
@inject('cf')
@observer
class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
      remembered: true,
      verifyOk: false,
    }
  }
  onFinish = () => {
    // 点击登录的行为
   let {verifyOk} = this.state
    if (verifyOk) {
      // 发起登录请求
      axios({
        url: url.LOGIN,
        method: 'post'
      }).then(res => {
        console.log(res)
        // 向sessionstorage 写入数据
        sessionStorage.setItem('userLoginInfo',JSON.stringify(res.data))
        // 跳转页面
        this.props.history.push('/Main/Home')
      }).catch(err => {
        console.log(err)
      })
     
    }
  }
  verify=(e) => {
    console.info(e.target.value)
    this.props.cf.verifyIdentify(e.target.value) === true ? this.setState({
        verifyOk: true
    },() => {
      alert('验证通过')
    }) :
    alert('验证失败')
  }
  changeUsername =(e)=> {
    let name = e.target.value
    this.setState({
      username: name
    })
  }
  changePassword =(e)=>{
    let password = e.target.value
    this.setState({
      password: password
    })
  }
  render() {
    let mainStyle = {
      width: '100%',
      height: window.innerHeight + 'px',
      backgroundColor: '#F0F2F5',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      alignContent: 'center'
    }
    
    let {identifyNum} = this.props.cf
    return (
      <div style={mainStyle}>
        {/*<div>登录页面</div>*/}
        
        <div style={{padding: '100px', border: '1px solid #1890FF'}}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{remember: true}}
            onFinish={this.onFinish}>
            <Form.Item
              name="username"
              rules={[{required: true, message: 'Please input your Username!'}]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon"/>}
                placeholder="Username"
                value={this.state.username}
              onChange={this.changeUsername}/>
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{required: true, message: 'Please input your Password!'}]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon"/>}
                type="password"
                placeholder="Password"
                value={this.state.password}
                onChange={this.changePassword}
              />
            </Form.Item>
            
            <Form.Item name="identify" noStyle>
             <Input.Group   compact>
               <Input
                 type="text"
                 placeholder="identify"
                 onBlur={this.verify}
               />
               <Identify ref='id' identifyNum={identifyNum} changeIdentify={this.props.cf.createIdentify} />
             </Input.Group>
            </Form.Item>
            
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }
}

export default Login;
